<script setup lang="ts">
import { DeptVO } from '@/api/system/dept/types';
import { getAreaList } from '@/api/wuliu/area';
import { computed, ref } from 'vue';

defineProps<{
  disabled?: boolean;
}>();

const modelValue = defineModel<number | string>({ default: '' });

const loading = ref(false);

const areaData = ref<DeptVO[]>([]);

const areaColumns = computed(() =>
  areaData.value.map((item) => {
    const { deptId, deptName } = item;

    return {
      text: deptName,
      value: deptId
    };
  })
);

async function getAreaData() {
  try {
    loading.value = true;
    const { data } = await getAreaList({ pageNum: 1, pageSize: 1000 });
    areaData.value = data;

    if (!modelValue.value && data.length) {
      modelValue.value = data[0].deptId;
    }
  } catch (error) {
    console.error('Error get area data', error);
  } finally {
    loading.value = false;
  }
}

getAreaData();
</script>

<template>
  <el-select v-model="modelValue" :loading="loading" :disabled="disabled" laceholder="请选择区域">
    <el-option v-for="item in areaColumns" :key="item.value" :label="item.text" :value="item.value" />
  </el-select>
</template>

<style lang="scss"></style>
